<template>
    <view class="content" :style="{height:height+'px'}">
        <view class="top">
            <view class="steps-wrap">
                <view class="steps-line"/>
                <view class="steps">1</view>
                <text class="steps-text">实名信息</text>
            </view>
            <view class="steps-wrap">
                <view class="steps-line" style="border-color:#cccccc"/>
                <view class="steps" style="background:#cccccc">2</view>
                <text class="steps-text" style="color: #cccccc">绑定银行卡</text>
            </view>
            <view class="steps-wrap">
                <view class="steps-line" style="border-color: #cccccc"/>
                <view class="steps" style="background: #cccccc">3</view>
                <text class="steps-text" style="color: #cccccc">开户成功</text>
            </view>
        </view>
        <view class="bottom-zero">
            <view class="steps-text">开通工行账户 请准备以下资料</view>
            <view class="img-wrap">
                <view style="width: 50%">
                    <image mode="widthFix" class="bottom-img" src="/static/img/idHead.png"></image>
                    <view class="steps-text">身份证</view>
                    <view class="steps-text" style="color: #E8E8E8">上传身份证正反面信息</view>
                </view>
                <view style="width: 50%">
                    <image mode="widthFix" class="bottom-img" src="/static/img/debitCard.png"></image>
                    <view class="steps-text">借记卡</view>
                    <view class="steps-text" style="color: #E8E8E8">绑定借记卡</view>
                </view>
            </view>
        </view>
        <button type="warn" class="sub-button" @click="next">
            准备好了
        </button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad() {

        },
        methods: {
            next() {
                uni.navigateTo({
                    url: '../steps/index2'
                });
            }
        }
    }
</script>

<style scoped>
    .content {
        height: 100%;
        /*padding-top: 20upx;*/
        background: #F3F3F3;
    }

    .top {
        width: 100%;
        height: 95upx;
        background: white;
        display: flex;
        padding-top: 25upx;
        justify-content: space-around;
    }
    .steps-wrap{
        display:flex;
        flex-direction: column;
        align-items: center;
        width: 33.34%;
    }
    .steps-line{
        width: 33.34%;
        border-bottom: 2px solid #DC5C4B;
        position: absolute;
        margin-top: 25upx;
    }
    .steps {
        z-index:1;
        width: 50upx;
        height: 50upx;
        background: #DC5C4B;
        border-radius: 40upx;
        color: rgba(255, 255, 255, 1);
        font-size: 32upx;
        text-align: center;
        font-family: PingFangSC-regular;
    }
    .steps-text{
        font-size: 28upx;
        font-family: PingFangSC-regular;
    }
    .bottom-zero{
        width: 100%;
        height: 300upx;
        background: white;
        padding-top: 80upx;
        margin-top: 40upx;
        text-align: center;
    }
    .img-wrap{
        display: flex;
        justify-content: space-around;
        margin-top: 40upx;
    }
    .bottom-img{
        width: 40%;
    }
    .sub-button{
        width: 98%;
        margin:30upx 0 0 1%;
        background: #D14F43;
        border-radius: 4upx;
    }
</style>
